<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
    <img id="h1" src="img/1.png"> <br> <br>

    <div class="cls">学习java</div>
    <div class="cls">学习mysql</div>

    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">游戏
    <input type="checkbox" name="hobby">旅游
  
</body>
</html>
<script>
    /* 
    DOM：Document Object Model,文档对象模型
    js将html文档的各个部分封装为对象 那么针对对象就会提供属性和方法的操作
    对于整个html文档 是非常丰富的
    对象可以封装为：
    Document对象 整个文档
    Element对象  一个标签对象
    Attribute对象  属性对象
    Text对象      文本对象
    Comment对象   注释对象

    这些对象有什么用：
    改变html元素的内容
    改变html元素的样式
    对HTML做出事件的响应
    对html元素作出增加 删除等操作
    
    
    
    */

    /* 1.获取DOM对象 */
    /* 根据元素的id属性值获取元素对象 */
  var img =  document.getElementById("h1");
 /*  alert(img); *///图片标签对象

    //根据元素的class属性获取元素的对象集合
  var divs = document.getElementsByClassName("cls");
  /* alert(divs[0]); */

  //根据元素的name属性来获取元素对象集合
   var hobbys  =  document.getElementsByName("hobby");
   /* alert(hobbys[0]) */

   //根据元素的标签名来获取元素集合
   var inputs  = document.getElementsByTagName("input");

   //html5中提出了两个根据选择器获取元素的方法 
   document.querySelector(".cls");//只会获得满足选择器的第一个对象
   document.querySelectorAll(".cls");//获得满足选择器的全部对象集合


</script>